<template>
  <!-- 订单详情页 -->
  <div class="order">
    <!-- 头部 -->
    <div class="back_">
      <i class="iconfont icon-fanhui1" @click="toback" />
    </div>
    <div class="table_content">
      <el-table
        v-loading="loading"
        stripe
        :data="orderLinesData"
        style="width: 100%"
      >
        <!-- 订单号编号 -->
        <el-table-column
          prop="id"
          label="订单号编号"
          width="180"
          align="center"
        />
        <!-- 产品编号 -->
        <el-table-column
          prop="productId"
          label="产品编号"
          width="180"
          align="center"
        />
        <!-- 产品 -->
        <el-table-column
          prop="product.name"
          label="产品"
          align="center"
        />
        <!-- 产品图片 -->
        <el-table-column
          prop="product.photo"
          label="产品图片"
          align="center"
        >
          <template slot-scope="scope">
            <el-image
              style="width: 40px; height: 40px"
              :src="scope.row.product.photo"
              :preview-src-list="[scope.row.product.photo]"
            />
          </template>
        </el-table-column>
        <!-- 单价 -->
        <el-table-column
          prop="product.price"
          label="单价"
          align="center"
        >
          <template
            slot-scope="scope"
          >{{ "￥ " + scope.row.product.price + " 元" }}
          </template>
        </el-table-column>
        <!-- 数量 -->
        <el-table-column
          prop="number"
          label="数量"
          align="center"
        />
      </el-table>
    </div>
    <div class="blank" />
    <div class="content">
      <el-row :gutter="20">
        <el-col :span="6"><div class="grid-content bg-purple">
          <!-- 订单基本信息 -->
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>订单基本信息</span>
            </div>
            <div class="orderDe">{{ '订单编号: ' + orderbaseData.id }}</div>
            <div class="orderDe">{{ '订单金额: ￥' + orderbaseData.total + ' 元' }}</div>
            <div class="orderDe">下单时间: {{ orderbaseData.orderTime | fmtDate_global }}</div>
            <div class="orderDe">{{ '订单状态: ' + orderbaseData.status }}</div>
          </el-card>
        </div></el-col>
        <el-col :span="6"><div v-if="orderbaseData.employeeId" class="grid-content bg-purple-light">
          <!-- 接单者信息 -->
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>接单者信息</span>
            </div>
            <div class="orderDe">{{ '接单者: ' + employeeData.username }}</div>
            <div class="orderDe">{{ ' 姓 名: ' + employeeData.realname }}</div>
            <div class="orderDe"> 性 别: {{ employeeData.gender==='male'?'男':'女' }}</div>
            <div class="orderDe">{{ ' 手 机: ' + employeeData.telephone }}</div>
          </el-card>
        </div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple">
          <!-- 下单者信息 -->
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>下单者信息</span>
            </div>
            <div class="orderDe">{{ '下单者: ' + customerData.username }}</div>
            <div class="orderDe"> 性 别: {{ customerData.gender==='male'?'男':'女' }}</div>
            <div class="orderDe">{{ ' 状 态: ' + customerData.status }}</div>
            <div class="orderDe">{{ ' 手 机: ' + customerData.telephone }}</div>
          </el-card></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple">
          <!-- 雇主信息 -->
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>雇主信息</span>
            </div>
            <div class="orderDe">{{ ' 雇 主: ' + addressData.username }}</div>
            <div class="orderDe">{{ ' 手 机: '+ addressData.telephone }}</div>
            <div class="orderDe">{{ ' 地 区: '+ addressData.area }}</div>
            <div class="orderDe">{{ '服务地址: '+ addressData.address }}</div>
          </el-card></div></el-col>
      </el-row>
    </div>

  </div>
</template>

<script>
import { get } from '@/utils/request'
export default {
  data() {
    return {
      // 下单者信息
      customerData: {},
      // 雇主信息
      addressData: {},
      // 接单者信息
      employeeData: {},
      // 订单基本信息
      orderbaseData: {},
      loading: true,
      // 订单行数据
      orderLinesData: [],
      // 订单ID
      orderId: this.$route.query.id
    }
  },
  computed: {},
  created() {
    this.getOrderDetail()
  },
  mounted() {},
  methods: {
    // 获取订单详情
    async getOrderDetail() {
      const data = {
        id: this.orderId
      }
      const res = await get('/order/findById', data)
      // console.log(res)
      this.orderLinesData = res.data.orderLines
      this.orderbaseData = res.data
      this.addressData = res.data.address
      this.customerData = res.data.customer
      this.employeeData = res.data.employee
      this.loading = false
    },
    toback() {
      this.$router.go(-1)
    }
  }
}
</script>
<style scoped>
.order {
  margin-top: 20px;
}
.back_ {
  margin-top: 20px;
}
.orderDe {
  margin-bottom: 15px;
}
.icon-fanhui1 {
  font-size: 30px;
}
.blank {
  height: 30px;
}
.content {
  margin: 10px;
}
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
